<template>
    <div class="nav">
        <div class="nav_top">
            <van-image @click="pushWithQuery" class="image" round :src="imgUrl" />
            <span class="username">{{ nickName }}</span>
            <!-- <span style="font-size: 17px;margin-left: 140px;color: white" @click="goSession">消息</span> -->
        </div>
        <div class="nav_middle">
            <van-space class="space">
                <span>我的订单</span>
                <span>我的关注</span>
                <span>我的余额</span>
            </van-space>
        </div>
        <div class="nav_bottom">
            <van-cell-group>
                <van-cell title="我的优惠劵" is-link icon="setting-o" />
                <van-cell title="我的推广" is-link icon="setting-o" />
                <van-cell title="意见与反馈" is-link icon="setting-o" />
                <van-cell title="教师申请入驻" is-link icon="setting-o" />
                <van-cell title="设置" is-link icon="setting-o" @click="pushWithQuery" />
            </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getUserInfo } from '@/api/index'

const router = useRouter()
const route = useRoute()

const pushWithQuery = () => router.push('/my/set')

const goSession = () => router.push('/my/login')
const imgUrl = ref('')
const nickName = ref('')

onMounted(() => {
    getUserInfo().then((res) => {
        let data = res.data[0]
        imgUrl.value = data.avatar
        nickName.value = data.nickname
    })
})

</script>

<style lang="scss" scoped>
.nav {
    background-color: white;
    width: 100vw;
    height: 100vh;

    .nav_top {
        display: flex;
        /* 添加 flex 布局 */
        align-items: center;
        /* 垂直居中对齐 */
        /* justify-content: space-between; */
        /* 子元素水平间隔分布 */
        width: 100%;
        height: 28vh;
        margin: 0 auto;
        background-color: rgb(126, 128, 255);

        .image {
            margin-left: 20px;
            width: 80px;
            height: 80px;
            margin-right: 20px;
            /* 给头像右侧添加适当间距 */
        }

        .username {
            color: rgb(255, 255, 255);
            font-size: 17px;
        }
    }

    .nav_middle {
        width: 94%;
        height: 10vh;
        margin: 0 auto;
        background-color: rgb(255, 255, 255);
        border-radius: 6px;
        border: 2px solid rgb(218, 218, 218);
        margin-top: -20px;

        .space {
            margin-left: 20px;
            /* margin-top: 6px; */
            font-size: 15px;
            width: 100%;
            height: 100%;
            display: flex;
            /* justify-content: space-between; */
            /* 子元素水平间隔分布 */
            border-radius: 6px;
        }

        .space span {
            font-size: 15px;
            margin-left: 28.5px;
        }
    }

    .nav_bottom {
        margin-top: 14px;
    }
}
</style>